<template>
	<view class="content-header-tabar">
		<view class="top20"></view>
		<view class="body">
			<view class="header">
				<view class="flex-column">
					<view class="flex-row header-detail flex-item-center">
						<view>当前积分</view>
						<image src="../../static/tabbar/jfyou.png" mode="scaleToFill"></image>
					</view>
					<view class="header-detail-1">{{userInfo?userInfo.score:0}}</view>
				</view>
				<view v-if="pointsMallList.length==0">
					<image class="not-img" src="../../static/cart/nothas.png" mode="scaleToFill"></image>
					<view class="not-txt">暂无商品</view>
				</view>
				<view v-if="pointsMallList.length>0">
				<view class="top30"></view>
					<scroll-view :scroll-y="true" class="data-scroll" @scrolltolower="getGoodsList" lower-threshold="200">
						<view class="flex-row flex-content-between flex-wrap">
							<view v-for="postmall in pointsMallList" @tap="goGoodsInfo(postmall.id)">
								<view class="one flex-column">
									<image :src="$utils.cdnImg(postmall.image)" mode="widthFix"></image>
									<view>{{postmall.title}}</view>
									<view>￥{{postmall.price}}</view>
									<view class="price"><text>可用{{parseInt(postmall.max_score)}}积分</text></view>
								</view>
							</view>
						</view>
						
					</scroll-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				page:1,
				pointsMallList:[
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
					// "",
				],//积分商品
			}
		},
		computed:{
			userInfo(){
				return this.$store.state.user.userInfo
			}
		},
		onLoad() {
			let token = uni.getStorageSync('token')
			if(token){
				this.$store.dispatch("getUserInfo");
			}
			this.getGoodsList()
		},
		onPullDownRefresh() {
			this.page = 1;
			this.pointsMallList = [];
			this.getGoodsList(()=>{
				uni.stopPullDownRefresh();
			})
		},
		methods:{
			//跳转到商品详情
			goGoodsInfo(id){
				uni.navigateTo({
					url:'/pages/goods/goods_info?goods_type=1&id='+id
				})
			},
			getGoodsList(callback){
				let page = this.page;
				if(page==0){
					return
				}
				// console.log(page);
				let that = this;
				this.$api.getGoodsList({
					page:page,
					goods_type:2
				},false).then(res=>{
					console.log(res);
					if(res.data.length>0){
						that.pointsMallList.push(...res.data)
						that.page +=1
					}else{
						that.page=0
					}
				}).finally(e=>{
					if(typeof callback == 'function'){
						callback()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.price{
		>text{
			font-size: 12rpx !important;
			color: #00aa7f !important;
		}
	}
	.one{
		width: 335rpx;
		height: 457rpx;
		// background-color: #999999;
		margin-bottom: 45rpx;
		>image{
			width: 335rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 20rpx;
		}
		>view:nth-child(3){
			font-size: 26rpx;
			font-family: DIN-Bold, DIN;
			font-weight: bold;
			color: #FF5000;
			margin-top: 22rpx;
		}
	}
	/* #ifdef H5 */
	.data-scroll{
		width: 100%;
		height: calc(100vh - 100rpx - 280rpx);
		// background-color: #333333;
	}
	/* #endif */
	/* #ifdef APP-PLUS */
	.data-scroll{
		width: 100%;
		height: calc(100vh - 100rpx - 80rpx);
		// background-color: #333333;
	}
	/* #endif */
	/* #ifdef MP */
	.data-scroll{
		width: 100%;
		height: calc(100vh - 100rpx - 100rpx);
		// background-color: #333333;
	}
	/* #endif */
	.not-txt{
		font-size: 26rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #999999;
		text-align: center;
		margin-top: 30rpx;
	}
	.not-img{
		width: 260rpx;
		height: 260rpx;
		margin-top: 215rpx;
		margin-left: 215rpx;
	}
	.header-detail-1{
		font-size: 50rpx;
		font-family: DIN-Regular, DIN;
		font-weight: 400;
		color: #333333;
		margin-left: 30rpx;
		margin-top: 15rpx;
	}
	.header-detail{
		padding-top: 20rpx;
		margin-left: 30rpx;
		>view{
			font-size: 28rpx;
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
		}
		>image{
			width: 25rpx;
			height: 25rpx;
			margin-left: 25rpx;
		}
	}
	.header{
		width: 690rpx;
		height: 146rpx;
		/* #ifdef MP */
		background-image: url('http://ws.facai.maowenke.cn/img/jfbj.png');
		
		/* #endif */
		/* #ifndef MP */
		background-image: url('../../static/tabbar/jfbj.png');
		/* #endif */
		
		background-size: 100%;
	}
	.body{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
</style>